<template>
    <div>
        <div>
            <center>
            <table border="1">
            <tr>
                <th>序号</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item, index) in glist">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.price}}</td>
                <td>
                    <button @click="cut(index)">-</button>
                    {{ item.num }}
                    <button @click="add(index)">+</button>
                    </td>
                <td><button @click="del(index)">移除</button></td>
            </tr>
            </table>
            总价：{{ total }}
            </center>
        </div>
        
        <!-- 监听属性 -->
        <button @click="counter++">
            点我+1
        </button>

        <br>

        {{ reverse_msg }}

        <!-- 绑定样式 -->
        <div :class="{active: isactive}">

        </div>

        <!-- 遍历展示 -->
        <ul>
            <li v-for="(item, index) in tlist" :class="{on: index % 2 == 0, off: index % 2 != 0}">
                {{ item.text }}
            </li>
        </ul>

        <div v-if="type === 'A'">
            A
        </div>

        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else>
            C
        </div>

        <h1 v-show="ok">biubiubiu   </h1>

        {{ msg }}
    </div>
</template>

<script>
export default {
    data(){
        return{
            msg: 'Hello,Vue',
            ok: true,
            type: 'A',
            tlist: [{text:'水果'},{text:'家电'},{text:'服饰'},{text:'玩具'}],
            isactive: false,
            counter: 0,
            glist:[
                {id: 1, name: 'iphone8', price: 5099, num: 3},
                {id: 2, name: 'iphone xs', price: 8699, num: 1},
                {id: 3, name: 'iphone xr', price: 6499, num: 1}
                ]
        }
    },

    // 监听属性
    watch: {
        counter: function(nval, oval){
            console.log('计数器的变化：'+'从' + oval + '变成了' + nval)
        }
    },

    // 计算属性
    computed: {
        // 反转
        reverse_msg: function () {
            return this.msg.split('').reverse().join('')
        },
        total: function () {
            var total=0;
            for(let i = 0; i<this.glist.length;i++){
            total+=this.glist[i].price*this.glist[i].num
            }
            return '$'+total
        }
    },


    mounted: function(){

    },

    methods: {
        cut(index) {
            if (this.glist[index].num > 0)  
            this.glist[index].num --;
        },
        add(index) {
            this.glist[index].num ++;
        },
        del(index) {
            this.glist.splice(index, 1)
        },
        add_goods: function (name) {
            let goodslist = this.glist;
            let find = 0;
            for(let i = 0, l = goodslist.length; i<l; i++){
                if(name == goodslist[i]['name']){
                    goodslist[i]['num']++;
                    find = 1;
                    break;
                }
            }
            if(find == 0){
                goodslist.push({name: name, num: 1, price: 0})
            }
            // 赋值
            this.glist = goodslist
        }
    }
}
</script>

<style>
    .on {background: blue}
    .off {background: yellow}
    .active{
        width: 100px;
        height: 200px;
        background: green;
    }
</style>